<template>
  <div class="bargain-department">
    <div class="left pr">
      <div class="head mb10">
        <span class="mr w60">省市区:</span>
        <AreaSelect class="mr" v-model="selectedAddress" :isChangeOnSelect="true" />
        <Input class="mr w330" v-model="keyword" placeholder="模糊搜索门店名称,门头编号,联系人姓名"/>
        <Button type="primary" @click="onSearch">搜索</Button>
      </div>
      <p class="tc bold x-big font-red">所有门店</p>
      <Table :columns="columns" :data="dataLeft" @on-row-click="onClickLeft" @on-select="onSelect" @on-select-all="onSelectAll" :height="480"></Table>
      <Page class="mt15" :total="totalLeft" show-sizer :current="currentLeft" :page-size='pageSize' @on-change="onPageChange" @on-page-size-change="onPageSizeChange"/>
    </div>
    <div class="right mt43 pl">
      <p class="tc bold x-big font-red">当前门店</p>
      <Table :columns="columns2" :data="dataRight" @on-row-click="onClickRight" :height="480"></Table>
      <Page class="mt15" :total="hasList.length" show-sizer :current="currentRight" :page-size='pageSizeRight' @on-change="onPageChangeRight"  @on-page-size-change="onPageSizeChangeRight"/>
    </div>
  </div>
</template>
<script>
import AreaSelect from '~/AreaSelect';
export default {
  components: {
    AreaSelect
  },
  data() {
    return {
      columns: [{
        type: 'selection',
        width: 60,
        align: 'left'
      }, {
        title: '品牌',
        key: 'brandName',
        align: 'left'
      }, {
        title: '门店名称',
        key: 'storeName',
        align: 'left'
      }, {
        title: '门头编号',
        key: 'storeNo',
        align: 'left'
      }, {
        title: '登录手机',
        key: 'storePhone',
        align: 'left'
      }, {
        title: '联系人姓名',
        key: 'ownerName',
        align: 'left'
      }],
      columns2: [{
        title: '品牌',
        key: 'brandName',
        align: 'left'
      }, {
        title: '门店名称',
        key: 'storeName',
        align: 'left'
      }, {
        title: '门头编号',
        key: 'storeNo',
        align: 'left'
      }, {
        title: '登录手机',
        key: 'storePhone',
        align: 'left'
      }, {
        title: '联系人姓名',
        key: 'ownerName',
        align: 'left'
      }],
      dataLeft: [],
      currentLeft: 1,
      pageSize: window.$pageSize,
      currentRight: 1,
      pageSizeRight: window.$pageSize,
      hasList: [],  // 编辑时已签约经销商
      selectedAddress: [],
      loading: false
    };
  },
  computed: {
    dataRight() {
      return this.hasList.slice((this.currentRight - 1) * this.pageSizeRight, this.pageSizeRight * this.currentRight)
    }
  },
  watch: {
    hasList(v) {
      if (v.length > 200) {
        this.$Notice.warning({
          title: '温馨提示',
          desc: '选择的门店不能超过200家'
        })
      }
    }
  },
  methods: {
    reset() {
      this.currentLeft = 1
      this.pageSize = window.$pageSize
      this.hasList = []
      this.currentRight = 1
      this.pageSizeRight = window.$pageSize
      this.selectedAddress = []
      this.keyword = ''
      this.getData()
    },
    onSearch() {
      this.currentLeft = 1
      this.getData()
    },
    getData() {
      let [p, c, a] = this.selectedAddress
      let params = {
        cityId: c,
        provinceId: p,
        areaId: a,
        keyword: this.keyword,
        current: this.currentLeft,
        size: this.pageSize
      }
      this.$jsonPost('/common/store/page', params).then(res => {
        this.dataLeft = (res.records || []).map((item, index) => {
          return {
            ...item,
            _index: index
          }
        })
        this.totalLeft = Number(res.total)
        this.onCompare()
      })
    },
    onSelect(selection, row) {
      this.hasList.push(row)
      this.$set(this.dataLeft[row._index], '_checked', true)
      this.$set(this.dataLeft[row._index], '_disabled', true)
    },
    onSelectAll(selection) {
      let allStoreId = this.hasList.map(item => item.storeId)
      this.dataLeft.forEach(item => {
        item._checked = true
        item._disabled = true
      })
      this.dataLeft.forEach((item, index) => {
        if (allStoreId.indexOf(item.storeId) < 0) this.hasList.push(item)
      })
    },
    onClickLeft(row, index) {
      if (row._disabled) return
      this.$set(this.dataLeft[index], '_checked', true)
      this.$set(this.dataLeft[index], '_disabled', true)
      this.hasList.push(row)
    },
    onClickRight(row, index) {
      this.hasList.splice(index, 1)
      this.onCompare()
    },
    onPageChange(number) {
      this.currentLeft = number
      this.getData()
    },
    onPageSizeChange(size) {
      this.pageSize = size
      this.currentLeft = 1
      this.getData()
    },
    onPageChangeRight(number) {
      this.currentRight = number
      this.rightData = this.hasList.slice((this.currentRight - 1) * this.pageSizeRight, this.pageSizeRight * this.currentRight)
    },
    onPageSizeChangeRight(size) {
      this.pageSizeRight = size
      this.currentRight = 1
      this.rightData = this.hasList.slice((this.currentRight - 1) * this.pageSizeRight, this.pageSizeRight * this.currentRight)
    },
    onCompare() { // 如果右侧的数据清除了，左侧的数据_checked要变成可勾选
      let allStoreId = this.hasList.map(item => item.storeId)
      this.dataLeft.forEach((item, index) => {
        if (allStoreId.indexOf(item.storeId) >= 0) {
          this.$set(this.dataLeft[index], '_checked', true)
          this.$set(this.dataLeft[index], '_disabled', true)
        } else {
          this.$set(this.dataLeft[index], '_checked', false)
          this.$set(this.dataLeft[index], '_disabled', false)
        }
      })
    }
  }
};
</script>
